<template>
	<view>
		<view id="home" style="margin-top: 30rpx;margin-left: 30rpx;float: left;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view>
		<view style="width: 100%;height: 60rpx;"></view>
		<form @submit="formSubmit" report-submit='true'>
			<view class='evaluate-con pad30'>
				<view class='score borRadius14'>
					<view class='textarea'>
						<textarea placeholder='请在此输入打卡内容' name="comment" placeholder-class='placeholder'
							:adjust-position="false"></textarea>
						<view class='list acea-row row-middle'>
							<view class='pictrue' v-for="(item,index) in pics" :key="index">
								<image :src='item'></image>
								<text class='iconfont icon-guanbi1' @click='DelPic(index)'></text>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic'
								v-if="pics.length < 8">
								<text class='iconfont icon-icon25201'></text>
								<view>上传图片</view>
							</view>
						</view>
					</view>
					<button class='evaluateBnt bg_color' formType="submit">发送</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		addDynamicComment
	} from '@/api/home.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {
		data() {
			return {
				pics: [],
				//picsPath: [],
				theme: app.globalData.theme,
				bootId: '',
				userId: '',
				myToken: '',
				dyTitle: '',
				arrangeId: '',
			};
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'chatUrl', 'md5AppToken', 'token']),
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {

					}
				},
				deep: true
			}
		},
		onLoad(options) {
			let that = this;
			that.bootId = options.bootId;
			that.userId = options.userId;
			that.myToken = options.token;
			that.dyTitle = options.dyTitle;
			that.arrangeId = options.arrangeId;

			console.log('---!@#----------------' + options.arrangeId);
		},
		mounted() {
			document.querySelector('meta[name="viewport"]').setAttribute('content',
				'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');

			document.addEventListener('focus', function(event) {
				if (['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
					// 增加少量延迟，确保键盘已弹出或正在弹出
					setTimeout(() => {
						event.target.scrollIntoView({
							behavior: 'smooth',
							block: 'center' // 或 'start', 'nearest'
						});
					}, 300); // 延迟时间可根据实际情况调整
				}
			}, true); // 使用捕获模式
		},
		methods: {
			returns() {
				uni.navigateBack();
			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(index) {
				let that = this;
				//that.picsPath.splice(index, 1);
				that.pics.splice(index, 1);
			},

			/**
			 * 上传文件
			 * 
			 */
			uploadpic11: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'user/upload/image',
					name: 'multipart',
					model: "product",
					pid: 1,
					count: 9, //最多9张
				}, function(res) {
					console.log('---  ' + JSON.stringify(res))
					that.pics.push(res.data.url);
					//that.picsPath.push(res.data.localPath);
					//that.$set(that, 'pics', that.pics);
					//that.$set(that, 'picsPath', that.picsPath);
				});
			},
			uploadpic: function() {
				let that = this;
				uni.chooseImage({
					count: 9, //最多可以选择的图片总数  
					sizeType: 'compressed', // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: function(res) {
						//启动上传等待中...  
						uni.showLoading({
							title: '图片上传中',
						});
						//let localPath = res.tempFilePaths[0];
						//console.log(res.tempFilePaths)
						that.servicepic(res.tempFilePaths);
					}
				})
			},
			servicepic(tempFilePaths) {
				let that = this;
				if (tempFilePaths.length === 0) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
					return;
				}

				const uploadTasks = tempFilePaths.map((filePath, index) => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://www.mae.vip/crmeb-front' +
								'/api/front/user/upload/image' +
								"?model=" + "product" +
								"&pid=" + 1, //上传接口地址
							filePath: filePath,
							name: 'multipart',
							formData: {
								'index': index
							},
							header: {
								// #ifdef MP
								"Content-Type": "multipart/form-data",
								// #endif
								'Authori-zation': that.token
							},
							success: (uploadFileRes) => {
								//console.log(`第${index+1}张图片上传成功`, uploadFileRes.data.code);
								let obj = JSON.parse(uploadFileRes.data)
								console.log(`第${index+1}张图片上传成功`, obj.data.url);
								that.pics.push(obj.data.url);
								resolve(uploadFileRes.data); // 将上传成功的结果传递出去
							},
							fail: (error) => {
								//console.error(`第${index+1}张图片上传失败`, error);
								reject(error); // 将错误传递出去
							}
						});
					});
				});

				// 使用 Promise.all 等待所有上传任务完成
				Promise.all(uploadTasks)
					.then(results => {
						//console.log('所有图片上传成功', results);
						uni.hideLoading();
						// uni.showModal({
						// 	title: '成功',
						// 	content: `所有图片上传成功！`,
						// 	showCancel: false
						// });
						//this.tempFilePaths = [];
						//this.imageList = [];
					})
					.catch(error => {
						console.error('部分图片上传失败', error);
						uni.showToast({
							title: '上传失败，请重试',
							icon: 'none'
						});
					});
			},
			/**
			 * 立即评价
			 */
			formSubmit: function(e) {
				// uni.$emit('refreshCommentList', '');
				// return;
				let value = e.detail.value;
				let that = this;
				if (!value.comment) return that.$util.Tips({
					title: '请填写你的打卡内容！'
				});
				value.dynId = that.bootId;
				//value.message = value.comment;
				value.message = '# ' + that.dyTitle + ' #' + value.comment;
				value.parentId = 0;
				value.rootId = 0;
				value.image = that.pics.join(',');
				value.type = '训练营';
				value.noticeUserId = 0;
				value.token = that.myToken;
				value.userId = that.userId;
				value.arrangeId = that.arrangeId; //安排id
				uni.showLoading({
					title: "正在发布……"
				});
				addDynamicComment(value).then(res => {
					uni.hideLoading();
					// return that.$util.Tips({
					// 	title: '评论成功',
					// 	icon: 'success'
					// }, '/pages/appsubs/home/worksDetail/index?bootId=' + that.bootId);
					uni.showToast({
						title: "打卡成功"
					})

					uni.$emit('refreshCommentList', '');
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);

				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-con .score {
		background-color: #fff;
		// border-top: 1rpx solid #f5f5f5;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #282828;
		padding: 46rpx 24rpx;
	}

	.evaluate-con .score .item~.item {
		margin-top: 36rpx;
	}

	.evaluate-con .score .item .evaluate {
		color: #aaa;
		font-size: 24rpx;
	}

	.evaluate-con .score .textarea {
		width: 100%;
		background-color: #F5F5F5;
		border-radius: 14rpx;
		// margin-top: 55rpx;
	}

	.evaluate-con .score .textarea textarea {
		font-size: 28rpx;
		padding: 38rpx 30rpx 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		height: 160rpx;
		width: auto !important;
	}

	.evaluate-con .score .textarea .placeholder {
		color: #bbb;
	}

	.evaluate-con .score .textarea .list {
		margin-top: 25rpx;
		padding-left: 5rpx;
	}

	.evaluate-con .score .textarea .list .pictrue {
		width: 140rpx;
		height: 140rpx;
		margin: 0 0 35rpx 25rpx;
		position: relative;
		font-size: 22rpx;
		color: #bbb;
		border-radius: 14rpx;
	}

	.evaluate-con .score .textarea .list .pictrue:nth-last-child(1) {
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}

	.evaluate-con .score .textarea .list .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}

	.evaluate-con .score .textarea .list .pictrue .icon-guanbi1 {
		font-size: 45rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.evaluate-con .score .textarea .list .pictrue .icon-icon25201 {
		color: #bfbfbf;
		font-size: 50rpx;
	}

	.evaluate-con .score .evaluateBnt {
		font-size: 30rpx;
		color: #fff;
		width: 100%;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin-top: 45rpx;
	}

	.bg_color {
		// @include main_bg_color(theme);
		background-color: #ea5550;
	}
</style>